<template>
  <div class="con">
    <van-nav-bar left-arrow placeholder fixed z-index="10" @click-left="lastPage" @click-right="toSearch()">
      <template #title>
        <van-field ref="field" v-model.trim="keyword" :placeholder="defaultKeyword.showKeyword" @focus="focus" @blur="blur" @keydown.enter="toSearch()" />
      </template>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>

    <div v-show="search" class="suggest">
      <div class="history" v-if="histroy.length != 0">
        <p class="title">历史</p>
        <div class="content">
          <div class="item" v-for="item in histroy" :key="item" @click="toSearch(item)">{{ item }}</div>
        </div>
      </div>

      <div class="hot">
        <p class="title">热搜榜</p>
        <div class="content">
          <div class="item" v-for="(item, index) in suggest" :key="item.suggest" @click="toSearch(item.searchWord)">
            <div :class="index < 3 ? 'best' : ''">{{ index + 1 }}</div>
            <div>{{ item.searchWord }}</div>
            <img :src="item.iconUrl" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { musicApi } from '../../config'
import { get } from '../../request/index'

export default {
  data() {
    return {
      search: false,
      keyword: '',
      defaultKeyword: {},
      suggest: [],
      histroy: [],
    }
  },
  created() {
    this.init()
  },
  methods: {
    focus() {
      this.search = true

      this.$emit('isSuggest', true)
    },
    blur() {
      setTimeout(() => {
        this.search = false
        this.$emit('isSuggest', false)
      }, 300)
    },
    toSearch(keyword) {
      const k = keyword ?? this.keyword

      if (k) {
        const histroy = JSON.parse(localStorage.getItem('histroyKeyword') ?? '[]')
        const i = histroy.indexOf(k)
        if (i != -1) {
          histroy.splice(i, 1)
        }
        histroy.unshift(k)
        localStorage.setItem('histroyKeyword', JSON.stringify(histroy.slice(0, 5)))
        this.histroy = histroy
      }

      this.$router.push({
        name: 'MSearchResult',
        query: { keyword: k },
      })

      document.getElementsByTagName('input')

      this.$refs['field'].blur()
    },

    init() {
      get(musicApi + '/search/default').then(res => (this.defaultKeyword = res.data))
      get(musicApi + '/search/hot/detail').then(res => (this.suggest = res.data))

      this.histroy = JSON.parse(localStorage.getItem('histroyKeyword') ?? '[]')
    },

    lastPage() {
      this.$router.go(-1)
    },
  },
}
</script>

<style lang="less" scoped>
.suggest {
  height: 70vh;
  background-color: #fff;
  width: 100vw;
  top: 46px;
  overflow: hidden;
}

.suggest {
  padding: 0 12px;

  .title {
    font-weight: 700;
  }

  .history .content {
    display: flex;
    overflow: auto;

    .item {
      flex-shrink: 0;
      background: #efefef;
      padding: 4px 8px;
      border-radius: 15px;
      font-size: 13px;
      margin: 0 5px;
    }
  }

  .hot .content {
    display: grid;
    grid-template-columns: repeat(2, 50%);

    .item {
      display: flex;
      align-items: center;
      line-height: 2;
      div:first-child {
        width: 20px;
        text-align: center;
      }

      div:nth-child(2) {
        margin-left: 10px;
      }

      img {
        margin-left: 10px;
        height: 15px;
      }

      .best {
        color: red;
      }
    }
  }
}
</style>
